<template>
    <div class="progress-bar-container">
        <div class="time-wrap" v-if="!hiddenTime">
            <div class="time-common">{{currentTime | filterSeconds}}</div>
            <div class="time-common">{{endTime | filterSeconds}}</div>
        </div>
        <div class="progress-bar-wrap">
            <div class="progress-bar-common progress-bar-static" ref="staticBarRef"></div>
            <div class="progress-bar-common progress-bar-dynamic" :style="{width: progressWidth}"></div>
            <div class="progress-bar-indicator" :style="{left: indicatorLeftPos}"
                @touchstart.prevent="indicatorTouchStart"
                @touchmove.prevent="indicatorTouchMove"
                @touchend="indicatorTouchEnd"   
            ></div>
        </div>
    </div>
    
</template>
<script>
import { filterSeconds } from '@/filters';
export default {
    name: 'y-progress-bar',
	props: {
				currentTime: Number,
        endTime: Number,
        currentTimeChange: Function,
				hiddenTime: {
					type: Boolean,
					default: false
				},
    },
    data() {
        return {
            touchStart: false,
            offsetX: 0,
        }
    },
    methods: {
      // 开始点击进度条
      indicatorTouchStart(e) {
        this.touchStart = true;
        this.touchStartX = e.touches[0].pageX;
      },
      // 拖动进度条
      indicatorTouchMove(e) {
        if (!this.touchStart) {
            return;
        }
        this.offsetX = e.touches[0].pageX - this.touchStartX;
      },
      // 进度条拖动完成
      indicatorTouchEnd(e) {
        this.touchStart = false;
        let moveTime = this.timeWidthRadio * this.offsetX;
        let currTime = this.currentTime + moveTime;
        this.currentTimeChange(currTime);
      },
    },
    computed: {
        // 动态进度条的宽度
        progressWidth() {
					return this.currentTime / this.endTime * 100 + '%';
        },
        // 进度标志圆点的位置
        indicatorLeftPos() {
            // 设置95%避免indicator超出进度条
            return this.currentTime / this.endTime * 95 + '%';
        },
        // 时间与进度条宽度的比例
        timeWidthRadio() {
            return this.endTime / this.$refs.staticBarRef.clientWidth;
        }
    },
	created() {
    },
    mounted() {
    }
}
</script>
<style type="text/css">
.progress-bar-container {
    & .time-wrap {
        display: flex;
        justify-content: space-between;
        & .time-common {
            color: #333 ;
            font-size: .2rem;
        }
    }

    & .progress-bar-wrap{
        position: relative;
        margin-top: 0.38rem;

        & .progress-bar-common {
            height: 0.05rem;
            border-radius: 0.1rem;
        }
        & .progress-bar-static {
            width: 100%;
            background: #f4f4f4;
        }
        & .progress-bar-dynamic{
            /* width: 50%; */
            background: #84daeb;
            position: absolute;
            top: 0;
        }
        & .progress-bar-indicator{
            background: #69cbf9;
            width:0.34rem ;
            height: 0.34rem;
            border-radius: 0.2rem;
            position: absolute;
            top: -0.17rem;
        }
    }
}

</style>


